<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];


    // 请求的流程
    // 1. 创建请求
    // 2. 配置请求相关信息
    // 3. 发送请求
    // 4. 绑定事件 监听服务器响应
    // 5. 获取响应数据 -> 后期处理


    var wd = "";
    var col = "id";
    var type = "asc";
    var page = 1;
    var size = 10;

    getBtn.onclick = function () {

        /* var xhr = new XMLHttpRequest();

        xhr.open("get", `http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true)

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = xhr.responseText;
                // console.log(res);  // json字符串
                res = JSON.parse(res);
                console.log(res);  // js对象

                // 搜索 => 拿到数据渲染

            }
        } */

        // debugger;
        // get("http://121.43.116.41/demo/php/searchGradeOrderLimit.php",`wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,true,"json",function(res){
        //     console.log("请求成功",res);
        // })

        get({
            data: `wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`,
            url: "http://121.43.116.41/demo/php/searchGradeOrderLimit.php",
            dataType: "json",
            async: true,
            success: function (res) {
                console.log("请求成功", res);
            }
        })

        get({
            url: "http://121.43.116.41/demo/php/searchGradeOrderLimit.php",
            data: {
                wd:wd,
                col:col,
                type,
                page,
                size,
            },
            dataType: "json",
            async: true,
            success: function (res) {
                console.log("请求成功", res);
            }
        })
    }


    postBtn.onclick = function () {
        var user = "a123123";
        var pwd = "123123";

        post({
            url:"http://121.43.116.41/demo/php/login.php",
            // data:`user=${user}&pwd=${pwd}`,
            data:{
                user:user,
                pwd,
            },
            // async:true,
            dataType:"json",
            success:function(res){
                console.log("请求成功",res);
            }
        })
    }


    /* 
    对象传参
    options
        url:请求的地址
        data:携带的数据(参数数据队列 a=1&b=2&c=3)
        async:是否异步(默认true)
        dataType: 接口返回的数据类型 (方法默认text, 其他类型需要用户指定)
        success:  请求成功时执行的回调函数  => 函数有一个形参,用于接收请求的数据

        此封装的缺点:  传入data数据时 => 需要传参数数据队列,还要自己手动拼接  => 麻烦(wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size})

        // 有没有什么方法 => 快捷实现参数拼接 ?
        // 解决方式:  可以传入一个对象作为参数 => 在函数内部判断,如果data是纯对象 -> 内部将其解析为参数数据队列


    
    */
    function get(options) { // 传入一个配置对象 => {url:xxx, data:xxx, async:xxxx,dataType:xxxx,success:xxx}

        var { url, data, async = true, dataType = "text", success } = options;

        var xhr = new XMLHttpRequest();

        if (Object.prototype.toString.call(data) == "[object Object]") {
            var list = [];
            for (var key in data) {
                var val = data[key];
                var subStr = key + "=" + val;
                list.push(subStr);
            }
            data = list.join("&");
        }
        console.log(data);
        xhr.open("get", data ? url + "?" + data : url, async)

        xhr.send();

        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = xhr.responseText;
                if (dataType == "json") {
                    res = JSON.parse(res);
                }
                // console.log(res);  // js对象

                // 获取数据之后 -> 可能要执行的操作不一样
                // 搜索 => 拿到数据渲染
                // 注册 -> 跳转登录
                // 删除 -> 提示

                // 请求成功时执行的回调函数
                if (success && typeof success == "function") {
                    success(res);  // 调用回调函数值,请求的数据作为实参
                }
            }
        }
    }

    function post(options) { // 传入一个配置对象 => {url:xxx, data:xxx, async:xxxx,dataType:xxxx,success:xxx}

        var { url, data, async = true, dataType = "text", success } = options;

        var xhr = new XMLHttpRequest();

        if (Object.prototype.toString.call(data) == "[object Object]") {
            var list = [];
            for (var key in data) {
                var val = data[key];
                var subStr = key + "=" + val;
                list.push(subStr);
            }
            data = list.join("&");
        }
        console.log(data);

        xhr.open("post", url, async)

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(data);

        xhr.onreadystatechange = function () {
            // debugger;
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = xhr.responseText;
                if (dataType == "json") {
                    res = JSON.parse(res);
                }
                // console.log(res);  // js对象

                // 获取数据之后 -> 可能要执行的操作不一样
                // 搜索 => 拿到数据渲染
                // 注册 -> 跳转登录
                // 删除 -> 提示

                // 请求成功时执行的回调函数
                if (success && typeof success == "function") {
                    success(res);  // 调用回调函数值,请求的数据作为实参
                }
            }
        }
    }


</script>

</html>